<template>

	<div class="position-absolute top-50 start-50 translate-middle">
		<div class=" d-flex ">
			<!-- 左 -->
			<div class="left">
				<div class="card">
					<div class="card-header d-flex justify-content-between align-items-center bg">
						<label>
							<input :disabled="data.length===0" type="checkbox" @click="leftAll()"
								:checked="selectStatus">
							<span class="ms-2  fs-5">{{title}}</span>
						</label>
						<span class=" text-secondary fs-6 numlist">{{SourceNum}}/{{data.length}}</span>
					</div>
					<div class="card-body">
						<ul class="p-0 m-0 overflow-auto">
							<li v-for='item in data' class="list-unstyled ">
								<div>
									<label @click="handleLeft(item.isSelected,item.id)">
										<input type="checkbox" v-model="item.isSelected">
									</label>{{item.name}}
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!-- 按钮 -->
			<div class="btns">
				<button type="button" class="btn btn-primary iconfont icon-zuo" @click="toSource()"
					:disabled="rightdata.length === 0 || TagNum === 0">
				</button>
				<button type="button" class="btn btn-primary iconfont icon-you" @click="toTag()"
					:disabled="data.length === 0 || SourceNum === 0">
				</button>
			</div>
			<!-- 右 -->
			<div class="right">
				<div class="card">
					<div class="card-header d-flex justify-content-between align-items-center bg">
						<label>
							<input :disabled="rightdata.length===0" type="checkbox" @click="rightAll()"
								:checked="selectRightStatus">
							<span class="ms-2  fs-5">{{righttitle}}</span>
						</label>
						<span class=" text-secondary fs-6 numlist">{{TagNum}}/{{rightdata.length}}</span>
					</div>
					<div class="card-body">
						<ul class="p-0 m-0 overflow-auto">
							<li v-for='item in rightdata' class="list-unstyled ">
								<div>
									<label @click="handleRight(item.isSelected,item.id)">
										<input type="checkbox" v-model="item.isSelected">
									</label>
									{{item.name}}
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>



</template>

<script>
	export default {
		name: 'parent',
		data() {
			return {
				dataId: [],
				rightdataId: [],
			}
		},
		model: {
			prop: "rightdata",
			event: "rightValue",
		},
		props: {
			title: {
				type: String,
				default: '左',
			},
			righttitle: {
				type: String,
				default: '右',
			},
			data: {
				type: Array,
				default: [],
			},
			rightdata: {
				type: Array,
				default: [],
			}
		},
		computed: {
			// 左全选状态
			selectStatus() {
				if (this.SourceNum === this.data.length && this.SourceNum !== 0) {
					return true;
				} else {
					return false;
				}
			},
			// 右边全选状态
			selectRightStatus() {
				if (this.TagNum === this.rightdata.length && this.TagNum !== 0) {
					return true;
				} else {
					return false;
				}
			},
			// 左边选中的数量
			SourceNum() {
				return this.data.filter(item => item.isSelected).length;
			},
			// 右边选中的数量
			TagNum() {
				return this.rightdata.filter(item => item.isSelected).length;
			}
		},
		methods: {
			handleLeft(isExit, i) {
				if (!isExit) {
					this.dataId.push(i);
				} else {
					this.dataId.splice(this.dataId.indexOf(i), 1);
				}
			},
			handleRight(isExit, i) {
				if (!isExit) {
					this.rightdataId.push(i);
				} else {
					this.rightdataId.splice(this.rightdataId.indexOf(i), 1);
				}
			},
			// 全选
			leftAll() {
				let len = this.data.length;
				let slen = this.data.filter(item => item.isSelected).length;
				if (len !== slen) {
					this.data.map(item => (item.isSelected = true));
					this.dataId = [];
					this.data.forEach((item) => {
						this.dataId.push(item.id);
					})
				} else {
					this.data.map(item => (item.isSelected = false));
					this.dataId = [];
				}
			},
			rightAll() {
				let len = this.rightdata.length;
				let slen = this.rightdata.filter(item => item.isSelected).length;
				if (len !== slen) {
					this.rightdata.map(item => (item.isSelected = true));
					this.rightdataId = [];
					this.rightdata.forEach((item) => {
						this.rightdataId.push(item.id);
					})
				} else {
					this.rightdata.map(item => (item.isSelected = false));
					this.rightdataId = [];
				}
			},
			// 移到右框
			toTag() {
				let arr = [];
				this.dataId.forEach((item) => {
					this.data.forEach((items, index) => {
						if (items.id === item) {
							arr.push(index);
						}
					})
				})
				arr.sort((a, b) => {
					return b - a;
				})

				this.data.forEach((item) => {
					if (this.dataId.includes(item.id)) {
						item.isSelected = false;
						this.rightdata.push(item);
					}
				})
				arr.forEach((item) => {
					this.data.splice(item, 1);
				})
				this.dataId = [];
				this.$emit('rightValue', this.rightdata);
			},
			// 移到左框
			toSource() {
				let arr = [];
				this.rightdataId.forEach((item) => {
					this.rightdata.forEach((items, index) => {
						if (items.id === item) {
							arr.push(index);
						}
					})
				})
				arr.sort((a, b) => {
					return b - a;
				})

				this.rightdata.forEach((item) => {
					if (this.rightdataId.includes(item.id)) {
						item.isSelected = false;
						this.data.push(item);
					}
				})
				arr.forEach((item) => {
					this.rightdata.splice(item, 1);
				})
				this.rightdataId = [];
				this.$emit('rightValue', this.rightdata);
			}
		},
	}
</script>

<style scoped>
	ul {
		min-height: 200px;
		max-height: 200px;
	}

	ul li,
	.numlist {
		color: gray;
		font-size: 14px;
	}

	ul li {
		line-height: 30px;
	}

	ul li:hover {
		color: #61A1FE;
	}

	.bg {
		background-color: #F5F7FA;
	}

	.left,
	.right {
		width: 200px;
	}

	.btns {
		width: 125px;
		padding-top: 90px;
	}

	button {
		margin: 10px;
	}
</style>
